import { FC } from "react";
import { useNavigate } from "react-router-dom";
import { NavBar, Tabs, Cell, Button } from "react-vant";
import { useAppSelector } from "../../app/hooks";
import { useRequest } from "../../hooks/useRequest";
import { getTagList } from "../../service";
import { TagState } from "../../types";
const Index: FC = () => {
  const { loading, error, data } = useRequest<TagState[]>(getTagList);
  const token = useAppSelector(state => state.user.token);
  const list = useAppSelector(state => state.user.list);
  const navigate = useNavigate();
  if (loading || !data) {
    return <>数据加载中···</>;
  }
  if (error) {
    return <>报错: {error}</>;
  }
  return (
    <>
      <NavBar leftText="标签管理" onClickLeft={() => navigate(-1)} />
      <Tabs defaultActive={2}>
        <Tabs.TabPane title="全部标签">
          {data.data.map(v => {
            return (
              <Cell
                icon={<img src={v.image} alt="" />}
                label={`${v.count}w人已关注`}
                title={v.title}
                value={
                  <Button type="primary" round>
                    关注
                  </Button>
                }
                key={v.id}
              ></Cell>
            );
          })}
        </Tabs.TabPane>
        <Tabs.TabPane title="我的关注">
          {token ? (
            <>
              {list.map(v => {
                return (
                  <Cell
                    icon={<img src={v.image} alt="" />}
                    title={v.title}
                    value={
                      <Button type="primary" round>
                        已关注
                      </Button>
                    }
                    key={v.id}
                  ></Cell>
                );
              })}
            </>
          ) : (
            <>
              <Button type="primary" onClick={() => navigate("/login")}>
                用户还未登录,请登录
              </Button>
            </>
          )}
        </Tabs.TabPane>
      </Tabs>
    </>
  );
};
export default Index;
